<template>
  <div
    class="save-box save-1-box w-full h-full overflow-hidden flex justify-start items-center flex-col"
  >
    <div class="title-box w-full h-[52px] p-[0_20%] flex justify-between items-center box-border">
      项目基础信息
    </div>
    <div
      class="content-box w-full h-[calc(100%_-_116px)] p-[0_20%] box-border overflow-hidden overflow-y-auto"
    >
      <a-form
        layout="inline"
        :model="handlerData"
        :rules="Rules"
        class="ckd-inner-form-box"
        label-align="left"
        ref="RefFormBox"
      >
        <a-row justify="space-between" class="w-full">
          <a-form-item label="项目编号" field="code">
            <TextInput placeholder="请输入项目编号" v-model="handlerData.code"></TextInput>
          </a-form-item>
        </a-row>

        <a-row justify="space-between" class="w-full">
          <a-form-item label="项目名称" field="name">
            <TextInput placeholder="请输入项目名称" v-model="handlerData.name"></TextInput>
          </a-form-item>
        </a-row>
        <a-row justify="space-between" class="w-full">
          <a-form-item label="项目经理" field="manager">
            <TextInput placeholder="请输入项目经理" v-model="handlerData.manager"></TextInput>
          </a-form-item>
        </a-row>

        <a-row justify="space-between" class="w-full">
          <a-form-item label="项目进度" field="status">
            <SelectInput placeholder="请选择项目进度" v-model="handlerData.status">
              <a-option value="完成">完成</a-option>
              <a-option value="停滞">停滞</a-option>
              <a-option value="进行中">进行中</a-option>
            </SelectInput>
          </a-form-item>
        </a-row>
        <a-row justify="space-between" class="w-full">
          <a-form-item label="项目预算" field="budget">
            <TextInput placeholder="请输入项目预算" v-model="handlerData.budget"></TextInput>
          </a-form-item>
        </a-row>
        <a-row justify="space-between" class="w-full">
          <a-form-item label="实际花费" field="actual">
            <TextInput placeholder="请输入实际花费" v-model="handlerData.actual"></TextInput>
          </a-form-item>
        </a-row>
        <a-row justify="space-between" class="w-full">
          <a-form-item label="起始日期" field="dateRange">
            <RangePicker class="search-item" v-model="handlerData.dateRange"> </RangePicker>
          </a-form-item>
        </a-row>

        <a-row justify="space-between" class="w-full">
          <a-form-item label="项目描述" field="describe">
            <a-textarea
              placeholder="请输入项目描述"
              v-model="handlerData.describe"
              :max-length="400"
              allow-clear
              show-word-limit
            />
          </a-form-item>
        </a-row>
      </a-form>
    </div>
    <div class="footer-box w-full h-[64px] flex justify-between items-center pl-[24px] pr-[24px]">
      <span></span>
      <span>
        <a-button class="pr-2 ml-2" @click="quit">取消</a-button>
        <a-button type="primary" @click="nextStep(undefined)" class="ml-2">下一步</a-button>
      </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { watch, ref } from 'vue';
import { Rules } from '../values';
import { deepClone } from '@/util/clonedeep';

const props = defineProps({
  formData: {
    type: Object,
    required: true
  }
});
const RefFormBox = ref();
const emits = defineEmits(['update:formData', 'nextStep', 'quit']);
const handlerData = ref();
handlerData.value = { ...props.formData };

function nextStep(cb?: any) {
  if (!RefFormBox.value) {
    return;
  }
  RefFormBox.value.validate().then((res) => {
    if (!res) {
      const params = deepClone(handlerData.value);
      params.begin_time = `${params.dateRange[0]} 00:00:00`;
      params.end_time = `${params.dateRange[1]} 23:59:59`;
      if (params.dateRange.length > 0) {
        delete params.dateRange;
      }
      emits('nextStep', { ...params });
      cb ? cb() : false;
    }
  });
}
function quit() {
  emits('quit');
}

watch(
  () => props.formData,
  (val) => {
    handlerData.value = { ...val };
  },
  {
    deep: true
  }
);

defineExpose({
  next(cb?: any) {
    nextStep(cb);
  }
});
</script>

<style lang="less" scoped>
.save-1-box {
  .title-box {
    font-size: 14px;
    font-weight: bold;
    color: #394d73;
  }

  .footer-box {
    box-shadow: 0 0 6px 0 rgba(57, 77, 115, 0.1);
  }

  .ckd-inner-form-box {
    .arco-row {
      .arco-form-item {
        width: 100%;
        margin-top: 6px;
        :deep(.arco-form-item-label-col) {
          width: 90px;
          .arco-form-item-label {
            font-size: 14px;
            font-weight: normal;
            color: #465a80;
          }
        }
      }
    }
  }
}
</style>
